<template>
  <div style="margin-top: 5px; margin-left: 20px;">
    <!-- 多通道进件信息整合 -->
    <a-steps :current="vdata.currentStep" type="navigation" @change="handleStepChange">
      <a-step title="基础信息配置" :disabled="!props.isDetail" />
      <a-step title="活动规则配置" :disabled="!props.isDetail" />
      <a-step title="活动奖品配置" :disabled="!props.isDetail" />
    </a-steps>
    <!-- 基础信息配置 -->
    <ActivityBasicInfo v-show="vdata.currentStep === 0" ref="stepForm0Ref" :isDetail="props.isDetail" />

    <!-- 活动规则配置 -->
    <ActivitySetting v-show="vdata.currentStep === 1" ref="stepForm1Ref" :isDetail="props.isDetail" />

    <!-- 活动奖品配置模块 -->
    <ActivityAwardList
      v-show="vdata.currentStep === 2"
      ref="stepForm2Ref"
      :isDetail="props.isDetail"
      :award-max-num="-1"
      :award-type="'0,1,2,3'"
    />

    <a-divider />

    <div style="margin-top: 50px; margin-bottom: 50px;text-align: center;">
      <a-button v-show="vdata.currentStep > 0" type="primary" @click="onSteps(-1)"><left-circle-outlined /> 上一步 </a-button>
      &nbsp;&nbsp;
      <a-button v-show="vdata.currentStep < 2" type="primary" @click="onSteps(1)">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ActivityBasicInfo from './ActivityBasicInfo.vue'
import ActivitySetting from './ActivitySetting.vue'
import ActivityAwardList from './ActivityAwardList.vue'
import { reactive, defineExpose, getCurrentInstance, onMounted, inject } from 'vue'
import { useUserStore } from '@/store/modules/user'

// 获取当前实例
const { proxy }: any = getCurrentInstance()
// 绑定弹窗
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 接收父组件的创建活动的详细参数
const props = defineProps({
  isDetail: {
    type: Boolean,
    default: false
  }
})

// 数据源
const vdata: any = reactive({
  visible: false,
  currentStep: 0,
  saveObject: {}, // 保存的活动对象
})

// 接收父组件的创建活动的详细参数
let activityDetailInfoInject: any = inject('activityDetailInfo')
let activityDetailInfo: any = activityDetailInfoInject.value

onMounted(() => {
  myGlobalLoadingFunc(false)
})

/**
 * 切换步骤
 */
 function onSteps(step: number) {
  if (step < 0) {
    vdata.currentStep--
  } else {
    proxy.$refs['stepForm' + vdata.currentStep + 'Ref'].validateFields().then(() => {
      vdata.currentStep++
    }).catch((e) => {
      $infoBox.message.error(e || '数据填写不完整， 请检查后提交')
    })
  }
}
/**
 * 步骤点击切换 详情页专属
 */
 function handleStepChange(step){
  if(!props.isDetail) return // 非详情页不处理
  if(step == vdata.currentStep) return // 相同步数不处理
  vdata.currentStep = step
}

function validateAllForm(step: number, isDraft: boolean = false) {
  return proxy.$refs['stepForm' + step + 'Ref'].validateFields(isDraft).then(() => {
    if (step >= 2) {
      return Promise.resolve()
    }
    return validateAllForm(++step, isDraft)
  }).catch((e) => {
    return Promise.reject(e)
  })
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isDraft){
  // 清除表单校验
  clearFieldValidate()
  // 验证所有表单
  return validateAllForm(0,isDraft).then(() => {
    return Promise.resolve()
  }).catch((e: any) => {
    $infoBox.message.error(e || '数据填写不完整， 请检查后提交')
    return Promise.reject(e)
  })
}

/**
 * 清除字段验证
 */
 function clearFieldValidate(){
  if (proxy.$refs['stepForm' + vdata.currentStep + 'Ref'] != undefined) {
    proxy.$refs['stepForm' + vdata.currentStep + 'Ref'].clearValidate() // 清除验证
  }
}

/**
 * 进度条
 * @param isShowGlobalLoadingVal 
 */
function myGlobalLoadingFunc(isShowGlobalLoadingVal) {
  useUserStore().setGlobalLoading(isShowGlobalLoadingVal)
}

/**
* 暴露方法
*/
defineExpose({ saveDataPreCallback })
</script>

<style lang="less" scoped>
</style>